<%@ page pageEncoding="UTF-8" contentType="text/html; charset=utf-8"   %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%
String id = request.getParameter("id");
String targetLanguage = request.getParameter("target");
org.languageguide.user.User user = org.languageguide.user.UserManager.getUser(session);
if (user == null){
	String uri = request.getRequestURI();
	String queryString = request.getQueryString();
	session.setAttribute("redirect_url", uri + "?" + queryString);
	response.sendRedirect("/user/login.jsp");
}
org.languageguide.readings.TranslatedReading reading = org.languageguide.readings.ReadingManager.getReading(id, targetLanguage);
org.languageguide.versioncontrol.LockingVersionControl readingVersionControl = (org.languageguide.versioncontrol.LockingVersionControl)reading;
boolean checkedOut = readingVersionControl.checkout(user);
if (!checkedOut){
	System.out.println("redirect: this sucker is checked out");
	return;
}
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interactive Reading Compiler</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
	#dialog{
		display:none;
		font-size: 70%;
	}
	#confirmation{
		display:none;
	}
	#text{
		display:none;
	}
	span {
		position:relative;
	}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
	var language = "<%= reading.getLanguage() %>";
	var target = "<%= reading.getTargetLanguage() %>";
	var id = <%= id %>;
	google.load("language", "1");
	function googleTranslate(){
		var option = document.getElementById("definition").contentWindow.getSelection();
		toTranslate = option.toString();
		if (toTranslate.length == 0){
			toTranslate = title;
		}
		
		google.language.translate(toTranslate, language, target, function(result) {
		if (!result.error) { 
			var translation = result.translation;
			var tmp = document.createElement("DIV");
			tmp.innerHTML = translation;
			var textNode = definitionDoc.createTextNode(" " + tmp.textContent.toLowerCase());
			var range = getRangeObject(definitionDoc, option);
			range.collapse(false);
			range.insertNode(textNode);
			definitionDoc.body.appendChild(textNode);
		  }
		});
		return;
	}
</script>


<script src="scripts/reading_creator.js"></script>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
  <tr> 
    <td valign="top">
    <button id="add_definition" onClick="javascript:addDefinitionOrTranslation()">Add Definition/Translation</button>
<button style="margin-left: 40px;" id="save_button" onClick="javascript:savePlease()">Save</button>  
<button id="exit_button" onClick="javascript:tryToExit()">Exit</button>  
<%
String status = reading.getStatus();
String partialSelection  = "";
String reviewSelection = "";
String finishedSelection  = "";
if (status != null){
	if (status.equals("partial")){
		partialSelection = "selected";
	}
	else if (status.equals("review")){
		reviewSelection = "selected";
	}
	else if (status.equals("complete")){
		finishedSelection = "selected";
	}
} 
%>
<label>Status
  <select name="status" id="status" onChange="statusChange()">
    <option value="new">New</option>
    <option value="partial" <%= partialSelection %>>Partially Done</option>
    <option value="review" <%= reviewSelection %>>Please Review</option>
    <option value="complete" <%= finishedSelection %>>Complete</option>
  </select>
</label> 
<div style="float:right">
<a href="docs/translations.html" target="_blank">Help</a></div>

<div id="dialog">
<select id="gender">
<option>masculine</option>
<option>feminine</option>
<option>neutral</option>
</select>
<button onClick="javascript:googleTranslate()">Google Translate</button>
    <iframe id="definition" frameborder="1" style="width:96%;" content_type="application/xhtml+xml" scrolling="auto">funky</iframe>
</div>   	
<div id="confirmation">
You have unsaved changes. Press 'Exit' to lose them, or 'Cancel' and then "save" to save them.
</div>
<div id="text"><%= reading.getText() %></div>
    
</td> 
  </tr> 
  <tr> 
    <td height="100%" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> 
      <tr> 
        <td width="100%" height="100%" valign="top">

<IFRAME id="reading" width="100%" frameborder="0" height="100%" scrolling="auto" content_type="application/xhtml+xml" title="interactive_reading"></IFRAME></td> 
        </tr> 
    </table></td> 
  </tr> 
<!--  <tr> 
    <td valign="top"><p>Footer row in third row of of outer table</p>    </td> 
  </tr>  -->
</table> 
</body>
</html>